<template>
  <view class="game-settings-container">
    <!-- 页面头部 -->
    <view class="page-header">
      <text class="page-title">荒岛生存设置</text>
      <text class="page-subtitle">自定义荒岛生存游戏体验</text>
    </view>
    
    <!-- 游戏设置分类 -->
    <view class="settings-categories">
      <!-- 音效设置 -->
      <view class="category-section">
        <view class="section-header" @click="toggleAudioSettings">
          <text class="section-title">音效设置</text>
          <text class="section-arrow" :class="{ expanded: showAudioSettings }">></text>
        </view>
        
        <view v-if="showAudioSettings" class="section-content">
          <view class="setting-item">
            <view class="setting-icon">🔊</view>
            <text class="setting-name">音效</text>
            <switch 
              :checked="gameSettings.soundEnabled" 
              @change="toggleSound"
              color="#667eea"
            />
          </view>
          
          <view class="setting-item">
            <view class="setting-icon">🎵</view>
            <text class="setting-name">背景音乐</text>
            <switch 
              :checked="gameSettings.musicEnabled" 
              @change="toggleMusic"
              color="#667eea"
            />
          </view>
          
          <view class="setting-item">
            <view class="setting-icon">📱</view>
            <text class="setting-name">震动反馈</text>
            <switch 
              :checked="gameSettings.vibrationEnabled" 
              @change="toggleVibration"
              color="#667eea"
            />
          </view>
        </view>
      </view>
      
      <!-- 显示设置 -->
      <view class="category-section">
        <view class="section-header" @click="toggleDisplaySettings">
          <text class="section-title">显示设置</text>
          <text class="section-arrow" :class="{ expanded: showDisplaySettings }">></text>
        </view>
        
        <view v-if="showDisplaySettings" class="section-content">
          <view class="setting-item">
            <view class="setting-icon">🌙</view>
            <text class="setting-name">深色模式</text>
            <switch 
              :checked="gameSettings.darkMode" 
              @change="toggleDarkMode"
              color="#667eea"
            />
          </view>
          
          <view class="setting-item" @click="selectDifficulty">
            <view class="setting-icon">⚡</view>
            <text class="setting-name">游戏难度</text>
            <text class="setting-value">{{ getDifficultyText(gameSettings.difficulty) }}</text>
            <text class="setting-arrow">></text>
          </view>
          
          <view class="setting-item">
            <view class="setting-icon">🎨</view>
            <text class="setting-name">动画效果</text>
            <switch 
              :checked="gameSettings.animationsEnabled" 
              @change="toggleAnimations"
              color="#667eea"
            />
          </view>
        </view>
      </view>
      
      <!-- 游戏数据 -->
      <view class="category-section">
        <view class="section-header" @click="toggleDataSettings">
          <text class="section-title">游戏数据</text>
          <text class="section-arrow" :class="{ expanded: showDataSettings }">></text>
        </view>
        
        <view v-if="showDataSettings" class="section-content">
          <view class="setting-item" @click="showGameStats">
            <view class="setting-icon">📊</view>
            <text class="setting-name">游戏统计</text>
            <text class="setting-arrow">></text>
          </view>
          
          <view class="setting-item" @click="backupGameData">
            <view class="setting-icon">💾</view>
            <text class="setting-name">备份存档</text>
            <text class="setting-arrow">></text>
          </view>
          
          <view class="setting-item" @click="restoreGameData">
            <view class="setting-icon">📥</view>
            <text class="setting-name">恢复存档</text>
            <text class="setting-arrow">></text>
          </view>
          
          <view class="setting-item" @click="resetGameData">
            <view class="setting-icon">🗑️</view>
            <text class="setting-name">重置游戏</text>
            <text class="setting-arrow">></text>
          </view>
        </view>
      </view>
      
      <!-- 帮助与支持 -->
      <view class="category-section">
        <view class="section-header" @click="toggleHelpSettings">
          <text class="section-title">帮助与支持</text>
          <text class="section-arrow" :class="{ expanded: showHelpSettings }">></text>
        </view>
        
        <view v-if="showHelpSettings" class="section-content">
          <view class="setting-item" @click="showGameHelp">
            <view class="setting-icon">❓</view>
            <text class="setting-name">游戏帮助</text>
            <text class="setting-arrow">></text>
          </view>
          
          <view class="setting-item" @click="showControls">
            <view class="setting-icon">🎮</view>
            <text class="setting-name">操作说明</text>
            <text class="setting-arrow">></text>
          </view>
          
          <view class="setting-item" @click="showAboutGame">
            <view class="setting-icon">ℹ️</view>
            <text class="setting-name">关于游戏</text>
            <text class="setting-arrow">></text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 游戏TabBar -->
    <view class="game-tabbar">
      <view class="tab-item" @click="navigateToSurvival" :class="{active: currentPage === 'survival'}">
        <text class="tab-icon">🏝️</text>
        <text class="tab-label">生存</text>
      </view>
      <view class="tab-item" @click="navigateToInventory" :class="{active: currentPage === 'inventory'}">
        <text class="tab-icon">🎒</text>
        <text class="tab-label">背包</text>
      </view>
      <view class="tab-item" @click="navigateToBuildings" :class="{active: currentPage === 'buildings'}">
        <text class="tab-icon">🏠</text>
        <text class="tab-label">建筑</text>
      </view>
      <view class="tab-item" @click="navigateToTech" :class="{active: currentPage === 'tech'}">
        <text class="tab-icon">🔬</text>
        <text class="tab-label">科技</text>
      </view>
      <view class="tab-item" @click="navigateToSettings" :class="{active: currentPage === 'settings'}">
        <text class="tab-icon">⚙️</text>
        <text class="tab-label">设置</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 'settings', // 当前页面标识
      showAudioSettings: true,
      showDisplaySettings: true,
      showDataSettings: false,
      showHelpSettings: false,
      gameSettings: {
        soundEnabled: true,
        musicEnabled: true,
        vibrationEnabled: true,
        darkMode: false,
        animationsEnabled: true,
        difficulty: 'normal' // easy, normal, hard
      }
    }
  },
  
  onLoad() {
    this.loadGameSettings()
  },
  
  methods: {
    loadGameSettings() {
      try {
        const settings = uni.getStorageSync('survival_game_settings')
        if (settings) {
          this.gameSettings = { ...this.gameSettings, ...JSON.parse(settings) }
        }
      } catch (error) {
        console.error('加载荒岛生存游戏设置失败:', error)
      }
    },
    
    saveGameSettings() {
      try {
        uni.setStorageSync('survival_game_settings', JSON.stringify(this.gameSettings))
      } catch (error) {
        console.error('保存荒岛生存游戏设置失败:', error)
      }
    },
    
    toggleAudioSettings() {
      this.showAudioSettings = !this.showAudioSettings
    },
    
    toggleDisplaySettings() {
      this.showDisplaySettings = !this.showDisplaySettings
    },
    
    toggleDataSettings() {
      this.showDataSettings = !this.showDataSettings
    },
    
    toggleHelpSettings() {
      this.showHelpSettings = !this.showHelpSettings
    },
    
    toggleSound(e) {
      this.gameSettings.soundEnabled = e.detail.value
      this.saveGameSettings()
      uni.showToast({
        title: this.gameSettings.soundEnabled ? '音效已开启' : '音效已关闭',
        icon: 'none',
        duration: 1500
      })
    },
    
    toggleMusic(e) {
      this.gameSettings.musicEnabled = e.detail.value
      this.saveGameSettings()
      uni.showToast({
        title: this.gameSettings.musicEnabled ? '背景音乐已开启' : '背景音乐已关闭',
        icon: 'none',
        duration: 1500
      })
    },
    
    toggleVibration(e) {
      this.gameSettings.vibrationEnabled = e.detail.value
      this.saveGameSettings()
      uni.showToast({
        title: this.gameSettings.vibrationEnabled ? '震动反馈已开启' : '震动反馈已关闭',
        icon: 'none',
        duration: 1500
      })
    },
    
    toggleDarkMode(e) {
      this.gameSettings.darkMode = e.detail.value
      this.saveGameSettings()
      uni.showToast({
        title: this.gameSettings.darkMode ? '深色模式已开启' : '深色模式已关闭',
        icon: 'none',
        duration: 1500
      })
    },
    
    toggleAnimations(e) {
      this.gameSettings.animationsEnabled = e.detail.value
      this.saveGameSettings()
      uni.showToast({
        title: this.gameSettings.animationsEnabled ? '动画效果已开启' : '动画效果已关闭',
        icon: 'none',
        duration: 1500
      })
    },
    
    selectDifficulty() {
      const difficulties = [
        { value: 'easy', text: '简单' },
        { value: 'normal', text: '普通' },
        { value: 'hard', text: '困难' }
      ]
      
      uni.showActionSheet({
        itemList: difficulties.map(d => d.text),
        success: (res) => {
          this.gameSettings.difficulty = difficulties[res.tapIndex].value
          this.saveGameSettings()
          uni.showToast({
            title: `难度已设置为${difficulties[res.tapIndex].text}`,
            icon: 'success',
            duration: 2000
          })
        }
      })
    },
    
    getDifficultyText(difficulty) {
      const difficultyMap = {
        'easy': '简单',
        'normal': '普通',
        'hard': '困难'
      }
      return difficultyMap[difficulty] || '普通'
    },
    
    showGameStats() {
      uni.showModal({
        title: '游戏统计',
        content: '游戏时长: 2小时30分钟\n完成成就: 5个\n最高等级: 15级',
        showCancel: false
      })
    },
    
    backupGameData() {
      uni.showToast({
        title: '存档备份成功',
        icon: 'success',
        duration: 2000
      })
    },
    
    restoreGameData() {
      uni.showModal({
        title: '恢复存档',
        content: '确定要恢复之前的存档吗？当前进度将被覆盖。',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '存档恢复成功',
              icon: 'success',
              duration: 2000
            })
          }
        }
      })
    },
    
    resetGameData() {
      uni.showModal({
        title: '重置荒岛生存',
        content: '确定要重置荒岛生存游戏的所有数据吗？此操作不可撤销！',
        success: (res) => {
          if (res.confirm) {
            uni.removeStorageSync('survival_game_data')
            uni.removeStorageSync('survival_game_settings')
            uni.showToast({
              title: '荒岛生存数据已重置',
              icon: 'success',
              duration: 2000
            })
            setTimeout(() => {
              uni.navigateBack()
            }, 2000)
          }
        }
      })
    },
    
    showGameHelp() {
      uni.showModal({
        title: '游戏帮助',
        content: '欢迎来到荒岛生存！\n\n1. 收集资源维持生存\n2. 建造建筑提升效率\n3. 研究科技解锁新功能\n4. 管理背包优化存储',
        showCancel: false
      })
    },
    
    showControls() {
      uni.showModal({
        title: '操作说明',
        content: '• 点击资源图标收集材料\n• 点击建筑图标建造升级\n• 点击科技图标进行研究\n• 点击设置图标调整游戏',
        showCancel: false
      })
    },
    
    showAboutGame() {
      uni.showModal({
        title: '关于游戏',
        content: '荒岛生存 v1.0\n\n一款模拟生存游戏，在荒岛上努力生存下去！\n\n开发者: MOE Team',
        showCancel: false
      })
    },
    
    // 导航方法
    navigateToSurvival() {
      uni.navigateTo({
        url: '/pages/game/survival/survival'
      })
    },
    
    navigateToInventory() {
      uni.navigateTo({
        url: '/pages/game/survival/survival'
      })
    },
    
    navigateToBuildings() {
      uni.navigateTo({
        url: '/pages/game/survival/survival'
      })
    },
    
    navigateToTech() {
      uni.navigateTo({
        url: '/pages/game/survival/survival'
      })
    },
    
    navigateToSettings() {
      // 已经在设置页面，不需要跳转
    }
  }
}
</script>

<style scoped>
.game-settings-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20rpx 20rpx 120rpx 20rpx; /* 为TabBar留出空间 */
}

.page-header {
  text-align: center;
  margin-bottom: 30rpx;
  padding: 30rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 16rpx;
}

.page-title {
  font-size: 40rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
}

.page-subtitle {
  font-size: 24rpx;
  opacity: 0.9;
}

.settings-categories {
  margin-bottom: 30rpx;
}

.category-section {
  background: white;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  cursor: pointer;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.section-arrow {
  font-size: 24rpx;
  color: #999;
  transition: transform 0.3s ease;
}

.section-arrow.expanded {
  transform: rotate(90deg);
}

.section-content {
  padding: 0 30rpx 20rpx;
}

.setting-item {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f8f9fa;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-icon {
  font-size: 32rpx;
  margin-right: 20rpx;
  width: 40rpx;
  text-align: center;
}

.setting-name {
  flex: 1;
  font-size: 26rpx;
  color: #333;
}

.setting-value {
  font-size: 24rpx;
  color: #666;
  margin-right: 10rpx;
}

.setting-arrow {
  font-size: 20rpx;
  color: #999;
}

/* 游戏TabBar样式 */
.game-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  display: flex;
  padding: 20rpx;
  box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 12rpx 6rpx;
  border-radius: 8rpx;
  transition: all 0.3s ease;
  cursor: pointer;
}

.tab-item.active {
  background: #f0f8ff;
  color: #667eea;
}

.tab-item:active {
  background: #f0f8ff;
  transform: scale(0.95);
}

.tab-icon {
  font-size: 28rpx;
  display: block;
  margin-bottom: 6rpx;
}

.tab-label {
  font-size: 18rpx;
  color: #666;
}

.tab-item.active .tab-label {
  color: #667eea;
  font-weight: bold;
}
</style>
